<template>
	<view v-if="isRender">
		<!-- <view class="subsection-box">
			<view :class="selectSubsection == item ? 'item active' : 'item'" @click="selectSubsection = item"
				v-for="(item,index) in list" :key="index">
				{{getStr(item)}}
			</view>
		</view> -->
		<view class="table-box">
			<view class="title-box">
				<text>{{getStr('my.detailOfAssets.quantity')}}</text>
				<text>{{getStr('my.detailOfAssets.ton')}}</text>
				<text>{{getStr('my.detailOfAssets.rate')}}</text>
				<text>{{getStr('my.detailOfAssets.business')}}</text>
				<text>{{getStr('my.detailOfAssets.time')}}</text>
			</view>
			<view class="item" v-for="item in dataList">
				<text>{{item.amount}}</text>
				<text>{{item.tonAmount}}</text>
				<text>{{item.tonUsdRate}}%</text>
				<text>{{item.des}}</text>
				<text>{{moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sysButton from '@/components/sysButton/index.vue'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getMyAccountRecord
	} from '@/common/api/common.js'
	import moment from 'moment'
	const isRender = ref(true)
	const list = ref(['buy', 'sell'])
	const selectSubsection = ref('buy')

	const dataList = ref([])
	const totalPages = ref(1)
	const page = ref(1)

	const getMyAccountRecordFn = async () => {
		const res = await getMyAccountRecord({
			page: page.value,
			telegramId: uni.getStorageSync('userInfo').telegramId
		})
		if (res.code == 200) {
			if(page.value == 1){
				dataList.value = res.data.userCards.content
			}else{
				dataList.value = dataList.value.concat(res.data.userCards.content)
			}
			
			totalPages.value = res.data.userCards.totalPages
		}
	}

	const goPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}

	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(() => {
			isRender.value = true
		}, 50)
	}
	onLoad(()=>{
		getMyAccountRecordFn()
	})
	onShow(() => {
		uni.$tg.showButton()
		setIsRender()
	})
	onReachBottom(()=>{
		if(page.value < totalPages.value){
			page.value += 1
			getMyAccountRecordFn()
		}
	})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.subsection-box {
		width: calc(100vw - 144rpx - 144rpx);
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #272A2F;
		border-radius: 12rpx;
		padding: 8rpx;
		box-sizing: border-box;
		margin: 28rpx auto 0;

		.item {
			width: 50%;
			height: calc(84rpx - 8rpx - 8rpx);
			color: #ffffff;
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.active {
			background: #1C1F24;
		}
	}

	.table-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 56rpx auto 0;
		background-color: #262930;
		border-radius: 16rpx;

		.title-box {
			height: 80rpx;
			border-bottom: 1rpx dashed #FFFFFF80;
			box-sizing: border-box;
			line-height: 80rpx;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF80;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			padding: 0 30rpx;

			text {
				width: 20%;
				text-align: center;
			}

			text:nth-child(1) {
				text-align: left;
			}

			text:nth-child(5) {
				text-align: right;
			}
		}

		.item {
			padding: 10rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF;
			font-size: 20rpx;

			text {
				width: 20%;
				text-align: center;
			}

			text:nth-child(1) {
				text-align: left;
			}

			text:nth-child(5) {
				text-align: right;
			}
		}
	}
</style>